<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.3.1.min.js"></script>
<style type="text/css">
	td{
		padding-bottom: 7px;
		padding-left: 10px;
	}
	a:link {
		color: gray;
		text-decoration: none;
	}
	a:hover {
		color: red;
		text-decoration: none;
	}
</style>
</head>
<body>
<div>
	<form name="f" >
			<table align="center">
				<caption>角色查询</caption>
				<tr>
					<td>角色名称：</td>
					<td><input type="text" name="userName"></td>
				</tr>
				<tr>
					<td colspan="2" align="center"><input type="button" value="查询" onclick="query(0)"></td>
				</tr>
			</table>
		</form>
	<div id="table" align="center" ></div>
	<hr>
	<div align="center">
		<input type="button" id="firstButton" value="首页" onclick="query(1)">
		<input type="button" id="upButton" value="上一页" onclick="query(2)">
		<input type="button" id="nextButton" value="下一页" onclick="query(3)">
		<input type="button" id="lastButton" value="尾页" onclick="query(4)">
		每页显示的数据笔数：<select id="pageSize" onchange="query(5)">
			<option value="5" selected="selected">5</option>
			<option value="6">6</option>
			<option value="7">7</option>
		</select>
		<span id="currentMessage"></span>
	</div>
</div>
</body>
<script type="text/javascript">
	var pageSize = $("#pageSize").val();//每页显示数据笔数
	var pageCurrent = 1;//显示页码
	var allCount = 0;//数据笔数
	var allCurrent = 0;//数据页数

	var userName = f.userName.value;
	
	query(0);
	function query(a){
		if(a == 0){
			pageCurrent = 1;
		}else if(a == 1){
			pageCurrent = 1;
		}else if(a == 2){
			pageCurrent = pageCurrent-1;
		}else if(a == 3){
			pageCurrent = pageCurrent+1;
		}else if(a == 4){
			pageCurrent = allCurrent;
		}else if(a == 5){
			pageSize = $("#pageSize").val();
			pageCurrent = 1;
		}
		
		$.ajax({// 进行提交
			type : "post",// 提交方式
			url : "${pageContext.request.contextPath}/FindRoleServlet02",// 提交路径
			async : true,// 是否异步
			dataType : 'json',// 数据格式（不进行跨越json，进行跨越jsonp）
			data : {
				userName : userName,
				pageSize:pageSize,
				pageCurrent:pageCurrent,
			},
			success : function(data) {// 执行成功后调动的方法
				allCount = data[0].count;//取得数据笔数
				if(allCount%pageSize == 0){
					allCurrent = allCount/pageSize;
				}else{
					allCurrent =  parseInt(allCount/pageSize)+1;
				}
				$("#currentMessage").html("<font color='blue'>当前显示第"+pageCurrent+"页,共"+allCurrent+"页,"+allCount+"笔数据</font>");
				var content = "<table><tr><th>角色名称</th><th>描述</th><th>状态</th></tr>"
				for(var i = 1;i < data.length;i++){
					var item = data[i];
					var state = "停用";
					if(item.roleState == 1){
						state = "在用";
					}
					content += "<tr><td>"+item.roleName+"</td><td>"+item.roleDescribe+"</td><td>"+state+"</td></tr>";
				}
				content += "</table>";
				$("#table").html(content);
				//如果当前显示页数为首页，则上一页以及首页不能使用
				
				if(pageCurrent == 1 && pageCurrent == allCurrent){
					$("#firstButton").attr({"disabled":"disabled"});
					$("#upButton").attr({"disabled":"disabled"});
					$("#nextButton").attr({"disabled":"disabled"});
					$("#lastButton").attr({"disabled":"disabled"});
				}else if(pageCurrent == 1){
					$("#firstButton").attr({"disabled":"disabled"});
					$("#upButton").attr({"disabled":"disabled"});
					$("#nextButton").removeAttr("disabled");
					$("#lastButton").removeAttr("disabled");
				}else if(pageCurrent == allCurrent){
					$("#nextButton").attr({"disabled":"disabled"});
					$("#lastButton").attr({"disabled":"disabled"});
					$("#firstButton").removeAttr("disabled");
					$("#upButton").removeAttr("disabled");
				}else{
					$("#firstButton").removeAttr("disabled");
					$("#upButton").removeAttr("disabled");
					$("#nextButton").removeAttr("disabled");
					$("#lastButton").removeAttr("disabled");
				}
			},
			error : function(err) {// 执行失败后的失败信息的显示
				console.log(err);
			}
		});
	}
</script>
</html>